<template>
  <view class="bg-color">
    <!-- 头像区域 -->
    <view class="user-info-box flex-col">
      <image class="avatar" src="@/static/avatar.jpeg" mode=""></image>
      <view class="ip">
        {{userInfo.IP}}
      </view>
      <view class="hometown">
        来自：贵州 · 贵阳
      </view>
    </view>
    <!-- 面板区域 -->
    <view class="panel-box">
      <!-- 面板1 -->
      <view class="panel panel1">
        <!-- 使用自定义的my-row组件 -->
        <navigator url="/subpkg/papers_list/papers_list?name=我的下载">
          <my-row icon-type="download-filled" text="我的下载" :num="userInfo.downloadSize"></my-row>
        </navigator>
        <navigator url="/subpkg/papers_list/papers_list?name=我的评分">
          <my-row icon-type="star-filled" text="我的评分" :num="userInfo.scoreSize"></my-row>
        </navigator>
        <!-- #ifdef H5 -->
        <my-row icon-type="phone-filled" @click=handlerCallPhone>
          <button class="btn">拨打电话</button>
        </my-row>
        <!-- #endif -->
        <!-- #ifdef MP -->
        <my-row icon-type="chatboxes-filled" text="联系客服"></my-row>
        <button open-type="contact" class="btn-contact">联系客服</button>
        <!-- #endif -->
      </view>
      <!-- 面板2 -->
      <view class="panel" style="margin-top: 40px;">
        <navigator :url="`/subpkg/notices_detail/notices_detail?id=${notice.update._id}`">
          <my-row icon-type="notification-filled" text="订阅更新"></my-row>
        </navigator>
        <navigator :url="`/subpkg/notices_detail/notices_detail?id=${notice.question._id}`">
          <my-row icon-type="flag-filled" text="常见问题"></my-row>
        </navigator>
      </view>
    </view>
  </view>

</template>

<script setup>
  import {
    onShow,
    onLoad,
  } from '@dcloudio/uni-app';
  import {
    reactive
  } from 'vue';
  import http from '@/api/index.js'
  import {
    showMsg
  } from '../../utlis/interact';

  // 数据
  const userInfo = reactive({});
  const notice = reactive({
    update: null,
    question: null
  });
  // 生命周期
  onShow(() => {
    getUserInfo();
  });
  onLoad(() => {
    getNoticeList();
  })
  // 网络请求
  // 获取用户ip,下载次数等
  async function getUserInfo() {
    const res = await http('api/bizhi/userInfo');
    if (res.errCode !== 0) return showMsg('网络繁忙，请稍后重试');
    Object.assign(userInfo, res.data);
  }
  // 获取非推荐公告列表
  async function getNoticeList() {
    const res = await http('api/bizhi/wallNewsList')
    if (res.errCode !== 0) return showMsg();
    notice.update = res.data.find(n => n.title === '欢迎关注咸虾米圈子公众号，获取UP主咸虾米最新动态。');
    notice.question = res.data.find(n => n.title === '常见问题，自行排查');
  }
  // 事件回调
  // 点击了拨打电话
  function handlerCallPhone() {
    uni.makePhoneCall({
      phoneNumber: '18230790344'
    })
  }
</script>

<style lang="scss" scoped>
  // 头像区域
  .user-info-box {
    height: 594rpx;
    justify-content: center;
    align-items: center;

    .avatar {
      width: 156rpx;
      height: 156rpx;
      border-radius: 50%;
    }

    .ip {
      padding: 20rpx 0;
      font-size: 40rpx;
    }

    .hometown {
      color: #909090;
    }
  }

  // 面板区域
  .panel-box {
    padding: 0 10px;

    .panel {
      border-radius: 10px;
      border: 1px solid #efefef;
      border-bottom: 0;
      overflow: hidden;
      position: relative;

      .btn {
        font-size: 16px;
        padding: 0;
        background-color: white;

        &:after {
          border: 0;
        }
      }


      :deep() {
        .panel-left {
          .uni-icons {
            color: $theme-color !important;
          }
        }
      }
    }

    .panel.panel1 {
      .btn-contact {
        position: absolute;
        bottom: 0%;
        left: 0;
        width: 100%;
        opacity: 0;
      }
    }
  }
</style>